<template>
  <view class="container">
    <view class="menu">
      <view class="menu-item">
        <view class="status_label">
          已入驻
        </view>
        <view class="warpper">
          <view class="linener">
            <image class="avatar_icon" src="../../static/images/avatar.png" mode=""></image>
            <view class="name">
              星巴克(学院路店)
            </view>
            <view class="sign">
              自预付
            </view>
          </view>
          <view class="linener">
            <view class="label">
              联系人：
            </view>
            <view class="value">
              刘涛
            </view>
          </view>
          <view class="linener">
            <view class="label">
              联系电话：
            </view>
            <view class="value">
              18326548546
            </view>
          </view>
          <view class="linener">
            <view class="label">
              店铺地址：
            </view>
            <view class="value">
              浙江省杭州市余杭区东城街道
            </view>
          </view>
          <view class="linener">
            <view class="label">
              业务员：
            </view>
            <view class="value">
              玉玉
            </view>
          </view>
          <view class="linener">
            <view class="label">
              创建时间：
            </view>
            <view class="value">
              2024-09-08 12:15:33
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="btn" @click="open">
            聚合码
          </view>
        </view>
      </view>
    </view>
    <view class="handleAdd">
      <view class="btn" @click="toHome">品牌创建</view>
    </view>
    <uv-popup ref="popup" mode="center" round="40">
    			<view class="dialog">
            <image class="close_icon" @click="handleClose" src="../../static/images/closed.png" mode=""></image>
    				<view class="dialog-title">
              聚合码
            </view>
            <uv-qrcode ref="qrcode" size="400rpx" value="https://h5.uvui.cn"></uv-qrcode>
            <view class="dialog-btn">
              保存图片
            </view>
    			</view>
    		</uv-popup>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        
      }
    },
    methods: {
      open(){
        this.$refs.popup.open();
      },
      handleClose(){
        this.$refs.popup.close();
      },
      toHome(){
        uni.switchTab({
          url: "/pages/home/index"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog{
    width: 660rpx;
    height: 748rpx;
    background: linear-gradient( 180deg, #FFD5CE 0%, #FFFFFF 100%);
    border-radius: 40rpx;
    padding: 40rpx 110rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .close_icon{
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      right: 40rpx;
      top: 40rpx;
    }
    .dialog-title{
      font-weight: bold;
      font-size: 40rpx;
      color: #333333;
      text-align: center;
      margin-bottom: 50rpx;
    }
    .dialog-btn{
      width: 440rpx;
      height: 88rpx;
      background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
      border-radius: 62rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
      margin-top: 50rpx;
    }
  }
  .handleAdd{
    padding: 30rpx 50rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    .btn{
      width: 100%;
      height: 88rpx;
      background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
      box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244,88,33,0.2);
      border-radius: 48rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
   
  }
  .container{
    .menu{
      padding: 30rpx;
      box-sizing: border-box;
      .menu-item{
        padding: 0 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;
        position: relative;
        .status_label{
          width: 154rpx;
          height: 50rpx;
          background: #FFF3E9;
          border-radius: 0rpx 0rpx 0rpx 30rpx;
          text-align: center;
          line-height: 50rpx;
          font-weight: bold;
          font-size: 24rpx;
          color: #FFA455;
          position: absolute;
          right: 0;
          top: 0;
        }
        .warpper{
          padding: 30rpx 0;
          box-sizing: border-box;
          .linener{
            display: flex;
            align-items: center;
            margin-top: 15rpx;
            .avatar_icon{
              width: 68rpx;
              height: 68rpx;
              border-radius: 50%;
              margin-right: 20rpx;
            }
            .name{
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              margin-right: 10rpx;
            }
            .sign{
              width: 80rpx;
              height: 34rpx;
              background: rgba(234,114,34,0.1);
              border-radius: 8rpx;
              font-weight: 400;
              font-size: 20rpx;
              color: #EA7222;
              text-align: center;
              line-height: 34rpx;
            }
            .label{
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
            }
            .value{
              font-weight: 400;
              font-size: 28rpx;
              color: #333;
            }
          }
        }
        .footer{
          padding: 30rpx 0;
          box-sizing: border-box;
          border-top: 2rpx solid #eee;
          display: flex;
          justify-content: flex-end;
          .btn{
            width: 172rpx;
            height: 64rpx;
            background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
            border-radius: 74rpx;
            text-align: center;
            line-height: 64rpx;
            color: #fff;
          }
        }
      }
    }
  }
</style>